Overview

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results. Select2 exposes its default options via the $.fn.select2.defaults object. Properties changed in this object (same properties configurable through the constructor) will take effect for every instance created after the change. Works well in IE8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+.

Main features:

• Enhancing native selects with search.
• Enhancing native selects with a better multi-select interface.
• Loading data from JavaScript: easily load items via AJAX and have them searchable.
• Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.
• Tagging: ability to add new items on the fly.
• Working with large, remote datasets: ability to partially load a dataset based on the search term.
• Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
• Templating: support for custom rendering of results and selections.

Usage

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/select2.min.js"></script>

<!-- Select2 element -->
<select class="select">
	<optgroup label="Mountain Time Zone">
		<option value="value">...</option>
		...
	</optgroup>
</select>

// Initialization
$('select').select2({
	// options
});

Select2 documentation

Overview

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown w dropdown menu containing the single options as checkboxes.

Usage

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/bootstrap_multiselect.js"></script>

<!-- Build your select -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

// Initialization
$(document).ready(function() {
    $('#example-getting-started').multiselect();
});

Configuration options

Plugin methods

Templates

The generated HTML markup can be controlled using templates. Basically, templates are simple configuration options. The default templates are shown below:

// Default templates
$(document).ready(function() {
    $('#example').multiselect({
        templates: {
            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
            ul: '<ul class="multiselect-container dropdown-menu"></ul>',
            filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
            li: '<li><a href="javascript:void(0);"><label></label></a></li>',
            divider: '<li class="multiselect-item divider"></li>',
            liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
        }
    });
});

Overview

Usage

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/bootstrap_select.min.js"></script>

<!-- Select element -->
<select class="selectpicker">
	<option>Mustard</option>
	<option>Ketchup</option>
	<option>Barbecue</option>
</select>

// Initialization
$('#selector').selectpicker();
	// options
});

Plugin options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="".

Plugin methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="".

Overview

SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. Twitter Bootstrap, jQueryUI, and jQuery Mobile themes are supported right out of the box. If you don't want to use these a library theme, then you can use the SelectBoxIt default theme, which closely resembles the Twitter Bootstrap theme. Feel free to customize the default theme to your liking.

To use SelectBoxIt, you do not have to rewrite any of your existing form validation logic or event handling. SelectBoxIt just works. SelectBoxIt also provides first-class support for mobile, tablet, and desktop browsers, triggering the native "wheel" interface for mobile and tablet devices

Usage

<!-- Load jQuery UI -->
<script type="text/javascript" src="assets/js/core/libraries/jquery_ui/core.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/selects/selectboxit.min.js"></script>

<!-- Create element -->
<select id="test" name="test">
	<option value="SelectBoxIt is:">SelectBoxIt is:</option>
	<option value="a jQuery Plugin">a jQuery Plugin</option>
	<option value="a Select Box Replacement">a Select Box Replacement</option>
	<option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>

// Executes your code when the DOM is ready.  Acts the same as $(document).ready().
$(function() {

	// Calls the selectBoxIt method on your HTML select box.
	$("select").selectBoxIt();
});

Plugin options

The Options API allows you to customize the dropdown list by setting custom options and getting all current options.

HTML5 Data Attribute Options

These options can be set on the select box or individual options directly within the HTML code.

Plugin events

The Events API allows your application to listen to user events triggered on the dropdown list. All custom/default events are triggered on the original select box element (not the new dropdown list).
The original select box value attribute is also synced with the new dropdown list, so if a user selects a new value from the dropdown list, the original select box value will also be updated. This allows your existing code to continue working inside of forms.

You can catch Default Events by using the jQuery bind() or on() methods, or by using jQuery convenience methods such as click(), change(), etc. You must use the jQuery bind() or on() methods to catch Custom Events.